<template>
	<view class="register-page flex flex-column">
		<view class="register-page-header flex flex-column">
			<input type="number" :maxlength="11" placeholder="请输入手机账号" class="register-input-phone" v-model="registerForm.account" />
			<input type="password" placeholder="请输入密码" class="register-input-password" v-model="registerForm.password" />
			<input type="text" placeholder="请输入邀请码（选填）" class="register-input-code" v-model="registerForm.inviteCode" />
			<view class="tip-text flex flex-center">
				<view>已有账号?去</view>
				<navigator url="/pages/login" :render-link="false" hover-class="none" class="tip-text-login">登录</navigator>
			</view>
			<view class="register-button" @tap="register"><text>注 册</text></view>
		</view>
	</view>
</template>

<script setup>
	import { reactive } from 'vue'
	import { http } from '@/utils/request'
	const registerForm = reactive({
		account: '15616101240',
		password: '123456',
		inviteCode: ''
	})
	const register = () => {
        if(!registerForm.account || !registerForm.password){
            uni.showToast({
                title: '请输入手机账号和密码',
                icon: 'none'
            })
            return
        }
		http.request({
			url: '/app/user/register',
			method: 'POST',
			data: {
				account: registerForm.account,
				password: registerForm.password,
				inviteCode: registerForm.inviteCode
			}
		}).then(res => {
			uni.showToast({
				title: '注册成功',
				icon: 'none'
			})
			uni.reLaunch({ url: '/pages/login' })
		})
	}
</script>

<style lang="scss" scoped>
	.register-page{
		height: 100%;
		justify-content: center;
		align-items: center;
		padding: 0 90rpx;
	}
	.register-page-header{
		font-size: 32rpx;
		width: 100%;
		.register-input-phone,
		.register-input-password,
		.register-input-code{
			font-size: 26rpx;
			height: 80rpx;
			border: 1px solid #E5E5E5;
			border-radius: 58rpx;
			padding: 0 24rpx;
		}
		.register-input-password,
		.register-input-code{
			margin-top: 34rpx;
		}
		.tip-text{
			font-size: 26rpx;
			color: #999999;
			margin-bottom: 120rpx;
			margin-top: 18rpx;
			text-align: center;
			.tip-text-login{
				color: #F35570;
				padding: 10rpx;
			}
		}
		.register-button{
			padding: 24rpx 48rpx;
			background: linear-gradient(90deg, #49f6fc 20%, #c5ff59 100%);
			text-align: center;
			border-radius: 58rpx;
			font-size: 32rpx;
			color: #333333;
			font-weight: 500;
			flex: 1;
		}
	}
</style> 